<template>
  <div id="app">
    <lux-header></lux-header>
    <left-menu></left-menu>
    <lux-aside v-show="fold"></lux-aside>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
import leftMenu from "@/components/left-menu";
import luxHeader from "@/components/lux-header";
import luxAside from "@/components/lux-aside";
import { mapGetters } from "vuex";

export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    leftMenu,
    luxHeader,
    luxAside
  },
  computed: {
    ...mapGetters(["fold"])
  }
};
</script>

<style lang="scss">
@import "./assets/styles/index.scss";
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: $gray;
  background-color: $bgColor;
  overflow-y: hidden;
  height: 100%;
  .el-input,
  .el-input__inner,
  .el-button,
  .el-card,
  .el-radio-group,
  .el-radio-button__inner {
    border-radius: 0 !important;
  }
}

.t-line {
  padding: 10px 15px;
  line-height: 30px;
  color: black;
  .t-left {
    display: inline-block;
    width: 20%;
    text-align: left;
  }
  .t-right {
    display: inline-block;
    width: 80%;
    text-align: right;
    color: "red" !important;
    &:nth-of-type(1) {
      color: "#c23531";
    }
    &:nth-of-type(2) {
      color: "#2f4554";
    }
    &:nth-of-type(3) {
      color: "#61a0a8";
    }
    &:nth-of-type(4) {
      color: "#d48265";
    }
    &:nth-of-type(5) {
      color: "#2f4554";
    }
    &:nth-of-type(6) {
      color: "#2f4554";
    }
    &:nth-of-type(7) {
      color: "#2f4554";
    }
  }
}
</style>
